﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxSample.aspx.cs" Inherits="CMSNSoftwareTutorials.SeoFriendlyAjaxApplications.AjaxSample" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .car-information
        {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: stretch;
            display: -moz-box;
            -moz-box-orient: horizontal;
            -moz-box-align: stretch;
            display: -o-box;
            -o-box-orient: horizontal;
            -o-box-align: stretch;
            display: box;
            box-orient: horizontal;
            box-align: stretch;
            margin: 5px 0 0;
            width: 100%;
        }
        .car-information div
        {
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            box-flex: 1;
            width: 720px;
            padding: 0 5px;
            text-align: justify;
            border-bottom: 1px solid #C2D6FF;
        }
        .car-information:hover
        {
            background-color: #C2D6FF;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <button class="car-details-button" type="button">
        Load Car Details</button>
    <asp:Literal runat="server" ID="CarDetails">
    <div class="car-details">
    </div>
    </asp:Literal>
    </form>
    <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        function loadCarDetails() {
            $.ajax({
                url: '/CarDetails.asmx/AllCars',
                type: 'GET',
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: ajaxSuccessfunction,
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(jqXHR.status + " : " + errorThrown);
                }
            });
        }
        $(".car-details-button").click(function () {
            window.location.hash = "!allCars";
        });
        function ajaxSuccessfunction(responseData) {
            var dataReturnFromServer = responseData.d;
            var i = 0;
            $(".car-details").empty();
            while (dataReturnFromServer.length > i) {
                $(".car-details").append(function () {
                    var carInformation = $("<div/>", { "class": "car-information" }).append($("<div/>").html(dataReturnFromServer[i].Make))
                    .append($("<div/>").html(dataReturnFromServer[i].Model)).append($("<div/>").html(dataReturnFromServer[i].Year))
                    .append($("<div/>").html(dataReturnFromServer[i].Doors)).append($("<div/>").html(dataReturnFromServer[i].Color))
                    .append($("<div/>").html(dataReturnFromServer[i].Price));
                    return carInformation;
                });
                i++;
            }
        }

        // call init
        $(init);
        function init() {
            ajax_page_handler();
            page_load($(window.location).attr("hash")); // goto first page if #!: is available
        }

        function page_load($href) {
            if ($href != undefined && $href.substring(0, 2) == '#!') {
                if ($href === "#!allCars") {
                    loadCarDetails();
                }
                $('html, body').animate({ scrollTop: 0 }, 'slow'); // bonus
            }
        }

        function ajax_page_handler() {
            $(window).bind('hashchange', function () {
                $href = $(window.location).attr("hash");
                page_load($href);
            });
        }
    </script>
</body>
</html>
